<template>
  <div>
    
     <el-row class="table-head-box">
         <el-col :span="4" class="flex flex-start">
          <el-button type="primary" icon="el-icon-plus" plain @click="addMenuHanlder">添加菜单</el-button>
        </el-col>
        <!-- <el-col :span="20" class="flex flex-end input-box">
          <el-input v-model="search.lkParam.userName" clearable placeholder="账号名称/账号/电话"></el-input>
          <el-button type="primary" icon="el-icon-search"  @click="searchUserHandler">查询</el-button>
        </el-col> -->

      </el-row>
    <el-table :data="menuDatas" style="width: 100%" expand-row-keys size="mini" row-key="menuId" border lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :max-height="tableHeight">
      <el-table-column prop="menuName" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="menuUrl" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="menuIcon" label="图标">
        <template slot-scope="{row}">
          <i :class="`el-icon-${ row.menuIcon }`"></i>
        </template>
      </el-table-column>
      <el-table-column prop="类型" label="类型" sortable>
        <template slot-scope="{row}">
          <div v-if="row.type == 1">菜单</div>
          <div v-else-if="row.type == 2">按钮</div>
          <div v-else-if="row.type == 3">其他</div>
        </template>
      </el-table-column>
      <el-table-column prop="sqe" label="顺序" sortable>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="{row}">
          <el-button class="el-icon-edit" v-if="row.status<2" @click="updateMenuHanlder(row)" type="primary" size="mini">编辑</el-button>
          <el-button :type="row.status ==1 ? 'warning' : 'success'" :class="`el-icon-${ row.status ==1 ? 'warning-outline' : 'success' }`" @click="handleClick(row,0)" size="mini">{{ row.status == 1 ? '禁用' : '启用' }}</el-button>
          <el-button class="el-icon-delete" v-if="row.status<2" @click="handleClick(row,2)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <MenuAdd :dialog="menuAddDialog" :popMenu="menu" v-on:load="loadFirstLevel" v-on:close="closeAddMenuHander"></MenuAdd>
  </div>
</template>
<script>
import { esAjax } from "../../utils/utils.js"
import {menusUrl,updateMenuStatusUrl,replaceUrlParam} from "@/utils/common"
import MenuAdd from "./menu-add"
export default {
  components: { MenuAdd },
  data() {
    return {
      menuDatas: [],
      menuAddDialog: false,
      menu: {},
      tableHeight: document.body.clientHeight - 160
    };
  },
 
  mounted() {
    console.log('进来了')
    this.loadFirstLevel();
  },
  methods: {
    load(tree, treeNode, resolve) {
      this.axios
        .post(menusUrl+ tree.menuId)
        .then(response => {
          if (response.data.status == "SUCCESS") {
            resolve(response.data.data);
          } else {
            this.$message.success("服务状态修改失败");
          }
        })
        .catch(response => {
          console.log("response -   " + response);
        });
    },
    /**
     * 加载第一级的菜单
     */
    loadFirstLevel: function () {
      // alert(1)
      this.axios
        .post(menusUrl+"0")
        .then(response => {
          if (response.data.status == "SUCCESS") {
            this.menuDatas = response.data.data;
          } else {
            this.$message.success("菜单列表获取失败");
          }
        })
        .catch(response => {
          console.log("response -   " + response);
        });
    },
    /**
     * 禁用菜单
     */
    handleClick: function (row,status) {
      let that = this;

      let operateText = (row.status == 1 && status == 0) ? '禁用' : row.status != 1 && status == 0 ? '启用' : '删除';
      // 禁用
      this.$confirm(`确定${ operateText }当前菜单吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          
          esAjax(replaceUrlParam(updateMenuStatusUrl,[row.menuId,status]), { token: "" },
            function (response) {
              row.status =status
              that.$message({ type: "success", message:  `菜单${ operateText }成功!` });
            },
            function (response) {
              
            }
          );
        })
        .catch(() => {
          this.$message({ type: "info", message: `菜单${ operateText }失败!` });
        });
    },
    /**
     * 添加菜单
     */
    addMenuHanlder: function (row) {
      this.menuAddDialog = true;

    },
    /**
     * 编辑
     */
    updateMenuHanlder: function (row) {
      this.menu = row;
      this.menuAddDialog = true;

    },
    closeAddMenuHander: function () {
      this.menuAddDialog = false;
    }
  }
};
</script>
<style scoped>
.grid-content {
  border-radius: 4px;
  text-align: right;
  padding: 0 30px 20px 30px;
  
 
}
</style>
